<template>
    <a-modal v-model:open="handleEditFlag" :footer="null" width="800px" centered title="编辑栏目">
        <div class="edit-wrapper">
            <div class="edit-clomn-box">
                <div class="edit-clomn edit-clomn-left">
                    <h4 class="clomn-title">一级栏目</h4>
                    <ul v-if="initColumnArr.length > 0">
                        <li v-for="(v, i) in initColumnArr" :key="i" :class="{ 'li-actived': v.checked }">
                            <a-checkbox v-model:checked="v.checked"
                                @change="changeCheck1(v, i)"></a-checkbox>
                            <div class="clomn-item-content" @click="showRight(v, i)">
                                <span> {{ v.name }}</span>
                                <img v-if="v.children?.length > 0" class="arrow-img"
                                    src="@/assets/img/meadiaIndex/up-icon.png" alt="">
                            </div>
                        </li>
                    </ul>
                    <div class="no-data" v-else>
                        暂无一级栏目数据
                    </div>
                </div>
                <div class="edit-clomn edit-clomn-right">
                    <h4 class="clomn-title">二级栏目</h4>
                    <ul v-if="initColumnArrChidren.length > 0">
                        <li v-for="(v, i) in initColumnArrChidren" :key="i"
                            :class="{ 'li-actived': v.checked }">
                            <a-checkbox v-model:checked="v.checked" @change="changeCheck2(v, i)">{{ v.name
                            }}</a-checkbox>
                        </li>
                    </ul>
                    <div class="no-data" v-else>
                        暂无二级栏目数据
                    </div>
                </div>
            </div>

            <div class="btns">
                <a-button type="default" @click="cancelFnColum">取消</a-button>
                <a-button type="primary" @click="submitColum">提交 </a-button>
            </div>
        </div>
    </a-modal>
</template>

<script lang="ts" setup>
import { ref} from "vue";
import { message, Modal } from "ant-design-vue";
import request from "@/utils/axios";
import { initColumnCase } from "@/utils/mediaDetailApi";
const emit = defineEmits(['refresh']);
// 初始化栏目
const getColumnOption = () =>{
    initColumnCase().then((res: any) => {
        initColumnArr.value = res;
    });
}

// 栏目编辑
const handleData = ref<string>('');
const handleEditFlag = ref<boolean>(false);
const initColumnArr: any = ref([]);
const initColumnArrChidren: any = ref([]);
let checkedList = []

const handleEditFn = (type: number, data: any,_o:any) => {
   
    if(_o.initColumnArr?.length){
        initColumnArr.value = _o.initColumnArr
    }else{
        getColumnOption()
    }
    handleEditFlag.value = true;
    if (type == 1) {
        handleData.value = data.media_resource_id;
    } else {
        checkedList = data
        handleData.value = '';
    }
    resetColumArr()
};
// 重置一二级栏目勾选的数据
const resetColumArr = () => {
    initColumnArr.value.forEach((vv, ii) => {
        vv.checked = false
        if (vv.children) {
            vv.children.forEach((vvv, iiii) => {
                vvv.checked = false
            })
        }
    })
    initColumnArrChidren.value = []
}
// 处理一级栏目的选中事件
const changeCheck1 = (v, i) => {
    const ck = v.checked
    resetColumArr()
    initColumnArr.value[i].checked = ck
    initColumnArrChidren.value = initColumnArr.value[i].children || []
}
const showRight = (v, i) => {
    v.checked = true
    changeCheck1(v, i)
}
// 处理二级栏目的选中事件
const changeCheck2 = (v, i) => {
    const ck = v.checked
    initColumnArrChidren.value.forEach((vv, ii) => {
        vv.checked = false
    })
    initColumnArrChidren.value[i].checked = ck
    // 如果子栏目选中，父栏目也要跟着选中
    if (ck) {
        initColumnArr.value.forEach(vv => {
            vv.checked = false
        })
        const _o = initColumnArr.value.find((vv, ii) => {
            if (vv.children) {
                return vv.children.find((vvv, iiii) => {
                    return vvv.checked
                })
            }
        })
        if (_o) _o.checked = ck
    }
}

const cancelFnColum = () => {
    handleEditFlag.value = false;
    handleData.value = '';
}

// 如果选的一级栏目 那么pre_level_column_id和column_id都填写父栏目ID  如果选的二级栏目那么pre_level_column_id为二级栏目ID  column_id为父栏目ID
const submitColum = () => {
    let column_id = ''
    let column_name = ''
    let pre_level_column_id = ''
    let pre_level_column_name = ''
    const _o = initColumnArr.value.find(v => {
        return v.checked
    })
    if (!_o) {
        message.warning('请选择栏目')
        return
    }
    column_id = _o.id
    column_name = _o.name
    pre_level_column_id = _o.id
    pre_level_column_name = _o.name

    if (_o.children) {
        const _o2 = _o.children.find(v => {
            return v.checked
        })
        if (_o2) {
            pre_level_column_id = _o2.id
            pre_level_column_name = _o2.name
        }
    }
    const params = {
        column_id,
        column_name,
        pre_level_column_id,
        pre_level_column_name
    }

    let ids: Array<string> = [];
    if (handleData.value == '') {
        checkedList.map((item: any) => {
            ids.push(item.media_resource_id)
        });
    } else {
        ids.push(handleData.value)
    }
    //提交
    request({
        url: "/mediaresource-manage-service/medias/operations",
        method: "PUT",
        data: {
            operate_type: 10,
            ids: ids,
            column: {
                pre_level_column_id: params.column_id,
                column_id: params.pre_level_column_id,
                column_name: params.column_name
            }
        }
    }).then((res) => {
        ids = [];
        handleEditFlag.value = false;
        message.success('编辑成功');
        emit("refresh")
    });

}
defineExpose({
    handleEditFn,
});
</script>
<style lang="scss" scoped src="../../Index.scss"></style>
<style lang="scss" scoped src="@/assets/css/list.scss"></style>